<template>
	<view>
		<my-swiper :options="item.product_images"></my-swiper>
		<uni-goods-nav :options="options" :buttonGroup="buttonGroup" @click="onClick" @buttonClick="buttonClick"
			class="goods-nav" />
		<!-- 信息栏目 -->
		<view class="info-column">
			<view class="info-price-wrapper">
				<view class="price-box"><text style="font-size: 40rpx;">￥</text>{{item.priceText}}</view>
				<view class="volume">
					<uni-icons type="fire-filled" size="13" color="#FF162E" style="margin-right: 5rpx;"></uni-icons>
					近30天{{item.saleText}}人已兑换
				</view>
			</view>
			<view class="info-price-wrapper">
				<view class="label">
					<label class="label1">
						<uni-icons type="hand-up-filled" size="13" color="#fff" style="margin-right: 5rpx;"></uni-icons>
						超值兑
					</label>
					<label class="label2">商品</label>
				</view>
				<view class="info-price-right">
					<view style="margin-right: 10rpx;">距失效仅剩</view><my-countdown></my-countdown>
				</view>
			</view>
			<view class="line20"></view>
			<view class="info-title">
				{{item.title}}
			</view>
			<view class="commodity-box">
				<view class="svg-icon">
					<svg t="1660898998650" class="icon" viewBox="0 0 1024 1024" version="1.1"
						xmlns="http://www.w3.org/2000/svg" p-id="19699" width="22" height="22">
						<path
							d="M383.301 709.042l-58.396 101.185s-1.062-12.158-2.623-23.45C320.327 772.632 311.773 752.998 291 741c-19.907-11.498-41.483-10.106-55.269-4.215-10.479 4.478-21.612 9.453-21.612 9.453l64.346-111.495a321.142 321.142 0 0 1-41.778-55.586L100.26 815.551c-8.795 15.239-3.527 34.907 11.706 43.705l147.053-62.84 19.127 158.823c15.233 8.798 34.892 3.529 43.687-11.711l123.76-214.446a317.613 317.613 0 0 1-62.292-20.04zM923.74 815.551L787.313 579.157a321.142 321.142 0 0 1-41.778 55.586l64.346 111.495s-11.133-4.975-21.612-9.453c-13.786-5.891-35.362-7.283-55.269 4.215-20.772 11.998-29.327 31.632-31.283 45.776-1.561 11.292-2.623 23.45-2.623 23.45l-58.396-101.185a317.524 317.524 0 0 1-62.292 20.04l123.76 214.446c8.795 15.239 28.454 20.509 43.687 11.711l19.127-158.823 147.053 62.84c15.234-8.798 20.502-28.465 11.707-43.704z"
							p-id="19700" fill="#f5b47f"></path>
						<path
							d="M512 128c38.908 0 76.618 7.606 112.083 22.606 34.287 14.502 65.094 35.277 91.564 61.747s47.245 57.277 61.747 91.564C792.394 339.382 800 377.092 800 416s-7.606 76.618-22.606 112.083c-14.502 34.287-35.277 65.094-61.747 91.564s-57.276 47.245-91.564 61.747C588.618 696.394 550.908 704 512 704s-76.618-7.606-112.083-22.606c-34.287-14.502-65.094-35.277-91.564-61.747s-47.245-57.276-61.747-91.564C231.606 492.618 224 454.908 224 416s7.606-76.618 22.606-112.083c14.502-34.287 35.277-65.094 61.747-91.564s57.277-47.245 91.564-61.747C435.382 135.606 473.092 128 512 128m0-64c-194.404 0-352 157.596-352 352s157.596 352 352 352 352-157.596 352-352S706.404 64 512 64z"
							p-id="19701" fill="#f5b47f"></path>
						<path
							d="M512.019 330.9c2.401 6.63 4.949 14.071 7.635 22.425l14.546 45.247 47.521-0.845a550.01 550.01 0 0 1 9.743-0.089c7.322 0 13.857 0.156 19.679 0.423-7.236 6.105-16.144 13.126-27.092 21.096l-37.853 27.556L561 491.133c3.008 9.026 5.525 17.133 7.63 24.397a630.953 630.953 0 0 1-17.611-13.078l-38.998-29.97-38.998 29.97a629.19 629.19 0 0 1-17.613 13.08c2.105-7.265 4.622-15.371 7.63-24.399l14.811-44.446-37.891-27.551c-10.438-7.59-19.034-14.294-26.102-20.152 8.566-0.631 18.652-1.09 30.485-1.253l45.981-0.634 14.068-43.781a650.548 650.548 0 0 1 7.627-22.416m-0.01-106.9c-22.549-0.006-45.064 36.647-68.55 109.737-148.871 2.053-163.754 48.007-41.137 137.162-29.791 89.398-29.254 137.123 5.806 137.123 21.422 0 55.732-17.814 103.893-54.825 48.153 37.005 82.47 54.825 103.893 54.825 35.07 0 35.598-47.717 5.804-137.123 119.411-86.929 108.362-137.261-30.254-137.261-3.549 0-7.165 0.033-10.881 0.099-23.542-73.225-46.074-109.731-68.574-109.737z"
							p-id="19702" fill="#f5b47f"></path>
					</svg>
				</view>
				<view class="service-box">
					<uni-icons type="checkbox" size="12" style="margin-right: 5rpx;" color="#333"></uni-icons>限时兑换
					<uni-icons type="checkbox" size="12" style="margin-right: 5rpx;" color="#333"></uni-icons>全国包邮
					<uni-icons type="checkbox" size="12" style="margin-right: 5rpx;" color="#333"></uni-icons>7天无理由退换
				</view>
			</view>
		</view>
		<!-- 商品信息 -->
		<view class="service-wrap">
			<view class="emption" v-for="(attr,aindex) in item.product_attrs" :key="aindex">
				<view class="emption-fh">{{attr.name}}</view>
				<view class="emption-zp">{{attr.value}}</view>
				<!-- <uni-icons type="forward" size="13" color="#ccc" style="margin-right: 5rpx;" class="emption-arrow"></uni-icons> -->
			</view>
			<view class="emption">
				<view class="emption-fh">库存</view>
				<view class="emption-zp">仅剩：<text class="text">{{item.stockText}}件</text><text class="text2" v-if="item.limit > 0">每人限兑{{item.limit}}件</text></view>
			</view>
		</view>
		<view class="service-bar contactService" @click="kefu">
			<view class="commodity">
				<text>专享福利</text>
				咨询客服了解更多
			</view>
			<view class="phone">
				<uni-icons type="headphones" size="28" color="#3bb061" style="margin-right: 5rpx;"></uni-icons>
			</view>
		</view>
		<view class="content">
			<rich-text :nodes="content"></rich-text>
		</view>
		
		<price-info></price-info>
		<product-specification :dataSource="item" ref="prSpec"></product-specification>
		<back-top v-if="isBackTop"></back-top>
	</view>
</template>

<script>
	import graphic from "@/components/graphic/graphic.vue"
	import priceInfo from "@/components/price-info/price-info.vue"
	import productSpecification from "@/components/product-specification/product-specification.vue"
	import backTop from "@/components/back-top/back-top.vue"
	export default {
		data() {
			return {
				options: [{
					icon: 'home',
					text: '首页'
				}, {
					icon: 'chatboxes-filled',
					text: '客服',
				}],
				buttonGroup: [{
						text: '￥1568',
						backgroundColor: '#fff',
						color: '#333',
						price: '直接购买'
					},
					{
						text: '超值兑>',
						backgroundColor: '#3bb061',
						color: '#fff',
						price: '12000积分+360元'
					}
				],
				isBackTop: false,
				id: 0,
				item: {
					id: 0
				},
				content: ''
			}
		},
		components: {
			graphic,
			priceInfo,
			productSpecification,
			backTop
		},
		computed: {
			device() {
				return this.$store.state.device
			}
		},
		onLoad(option) {
			if (option && option.id > 0) {
				this.id = option.id
				this.getProductDetail()
			}
		},
		onPageScroll(e) {
			const {
				scrollTop
			} = e;
			this.isBackTop = (scrollTop >= 100)
		},
		methods: {
			onClick(e) {
				uni.showToast({
					title: `点击${e.content.text}`,
					icon: 'none'
				})
				if (e.content.text == '首页') {
					uni.switchTab({
						url: "/pages/shop/index"
					})
				} else {
					this.kefu();
				}
			},
			kefu() {
				uni.navigateTo({
					url: "/pages/kefu/kefu"
				})
			},
			buttonClick(e) {
				this.$refs.prSpec.open()
			},
			getProductDetail() {
				this.$request("api/product/view", 'GET', {
					id: this.id
				}).then(res => {
					this.item = res.data.data
					/*
					const skus = this.item.product_skus
					let group = '默认'
					let productSkus = {}
					for(let i in skus){
						let name = skus[i]['name'].split(':')
						if(name.length == 2){
							group = name[0]
							skus[i]['name'] = name[1]
						} else {
							group = '默认'
						}
						skus[i]['group'] = group
						if(!productSkus[group]){
							productSkus[group] = [skus[i]]
						} else {
							productSkus[group].push(skus[i])
						}
					}
					console.log(productSkus)
					this.item.product_skus = productSkus
					*/
					this.content = this.item.content.content
				})
			}
		}
	}
</script>

<style lang="scss">
	page {
		padding-bottom: 55px;
		font-size: $uni-font-size-sm;
	}

	.goods-nav {
		width: 100%;
		position: fixed;
		left: 0;
		bottom: 0;
		z-index: 10;
	}
	.content{
		padding:20upx;
	}
	.info-column {
		padding: 20rpx 20rpx 0;
		background-color: $uni-text-color-inverse;

		.info-price-wrapper {
			display: flex;
			align-items: center;
			justify-content: space-between;

			.price-box {
				color: $theme-color;
				font-weight: bold;
				font-size: 48rpx;
			}

			.volume {
				font-size: $uni-font-size-sm;
				color: $uni-text-color-grey;
			}

			.label {
				margin: 20rpx 0;

				label {
					padding: 2rpx 10rpx;
					font-size: $uni-font-size-sm;
					display: inline-block;
					border-radius: 5rpx;
				}

				.label1 {
					color: $uni-text-color-inverse;
					background-color: $theme-color;
					margin-right: 15rpx;
				}

				.label2 {
					color: $uni-text-color-grey;
					border: 1rpx solid $uni-text-color-grey;
				}
			}

			.info-price-right {
				display: flex;
				align-items: center;
			}
		}

		.line20 {
			width: 100vw;
			background-color: $uni-bg-color;
			height: 10px;
			margin-left: -20rpx;
		}

		.info-title {
			margin-top: 20rpx;
			font-weight: bold;
			font-size: $uni-font-size-lg;
		}

		.commodity-box {
			padding: 15rpx 0;
			display: flex;
			margin-top: 20rpx;
			align-items: center;

			.svg-icon {
				display: flex;
				align-items: center;
			}

			.service-box {
				position: relative;
				margin-left: 40rpx;

				&::before {
					content: "";
					width: 1px;
					height: 15px;
					background-color: $uni-text-color-disable ;
					position: absolute;
					left: -15rpx;
				}
			}
		}
	}

	.service-bar {
		width: 100%;
		height: 53px;
		margin-bottom: 20rpx;
		display: flex;
		align-items: center;
		justify-content: space-between;
		background-color: $uni-text-color-inverse;
		padding-left: 20rpx;
		font-size: $uni-font-size-sm;

		.commodity {
			text {
				color: $uni-text-color-grey;
				margin-right: 30rpx;
			}
		}

		.phone {
			position: relative;
			padding: 0 30rpx;
			display: flex;
			align-items: center;

			&:before {
				content: "";
				width: 1rpx;
				height: 20rpx;
				position: absolute;
				left: 0;
				background-color: #ccc;
			}
		}
	}
	.service-wrap{
		width: 100%;
		background-color: $uni-text-color-inverse;
		margin-bottom: 20rpx;
		font-size: $uni-font-size-sm;
		.emption{
			width: 100%;
			height: 50px;
			display: flex;
			align-items: center;
			position: relative;
			justify-content: space-between;
			.emption-arrow{
				position: absolute;
				right: 20rpx;
			}
			.emption-fh{
				width: 110rpx;
				text-align: center;
				color: $uni-text-color-grey;
			}
			.emption-zp{
				flex: 1;
				height: 100%;
				line-height: 50px;
				border-bottom: 1rpx solid #e5e5e5;
				.text{
					color: $theme-color;
				}
				.text2{
					color: #fff;
					background-color: $theme-color;
					padding: 0 15rpx;
					border-radius: 5rpx;
					margin: 0 20rpx;
				}
			}
		}
	}
</style>